import React, {useEffect, useState} from "react";
import {Modal, Form, Input, Radio, message} from "antd";

import Avatar from "@/pages/users/components/userInfo/components/uploadAvatar";

const CourseModal = (props: any) => {
  const [form] = Form.useForm()
  const {visible, record, closeHandler, onFinish, setPhoto} = props
  const [photoUrl, setPhotoUrl] = useState(undefined)

  useEffect(() => {
    if(record === undefined) {
      form.resetFields()
    } else {
      form.setFieldsValue(record)
    }
  }, [visible])

  const onOk = () => {
    if(photoUrl === undefined){
      message.error("头像未上传")
    } else {
      setPhoto(photoUrl)
      form.submit();
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div>
      <Modal
        title="添加课程"
        visible={visible}
        onOk={onOk}
        onCancel={closeHandler}
        forceRender
        okText="确定"
        cancelText="取消"
      >
        <Form name="修改信息"
              form={form}
              labelCol={{span: 4}}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
        >
          <Form.Item label="课程名" name="courseName" rules={[{ required: true, message: '请输入课程名!' }]}>
            <Input/>
          </Form.Item>
          <Form.Item label="头像" name="photo">
            <Avatar setAvatarUrl={setPhotoUrl}/>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default CourseModal
